<template>
  <a-modal
    centered
    switchFullscreen
    :title="title"
    :width="1200"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    cancelText="关闭">

    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <vue-code-diff :old-string="oldStr" :new-string="newStr" :context="1000" outputFormat="side-by-side"/>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
  import {getAction} from '@/api/manage'
  import VueCodeDiff from 'vue-code-diff'

  export default {
    name: "DbmsViewCompareModal",
    components: {VueCodeDiff},
    props: ['source1','source2'],
    data() {
      return {
        oldStr: '',
        newStr: '',
        title: "操作",
        visible: false,
        model: {},
        labelCol: {
          xs: {span: 24},
          sm: {span: 5},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16},
        },

        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules: {},
        url: {
          viewDiff: "/dbms/dbmsDbsource/queryCompareViewContent",
        },
      }
    },
    created() {
    },
    methods: {
      viewDiff(record) {
        this.confirmLoading=true;
        this.oldStr="";
        this.newStr="";
        this.visible = true;
        var viewName=record.sourceResult;
        if(viewName==null||viewName==''){
          viewName=record.destinationResult;
        }
        var params={sourceId1:this.source1,sourceId2:this.source2,viewName:viewName};
        getAction(this.url.viewDiff, params).then((res) => {
          this.oldStr=res.result.sourceResult;
          this.newStr=res.result.destinationResult;
          if(res.result.result==1){
            this.oldStr=this.oldStr+" ";
          }

          this.confirmLoading=false;
        })
      },
      close() {
        this.$emit('close');
        this.visible = false;
      },
      handleOk() {
        // 触发表单验证

      },
      handleCancel() {
        this.close()
      },
      render_side_by_side(h) {
        return h('div', {}, [
          h('div', {
            staticClass: 'text-left text-tertiary font-14 text-weight-bold q-mt-md'
          }, [
            '两页显示对比结果，效果如下所示：'
          ]),
          h(VueCodeDiff, {
            props: {
              oldString: this.old_value,
              newString: this.new_value,
              context: this.context,
              outputFormat: 'side-by-side'
            }
          })
        ])
      },
      render(h) {
        return h('div', {
          staticClass: 'q-pa-sm'
        }, [
          this.render_side_by_side(h)
        ])
      }

    }
  }
</script>

<style scoped>

</style>